<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      width="100%"
      height="70vw"
    >
      <van-swipe-item v-for="item in list" :key="item.id">
        <img
          :src="'http://liufusong.top:8080' + item.imgSrc"
          alt=""
          width="100%"
        />
      </van-swipe-item>
      <!-- <van-swipe-item>
        <img
          src="http://liufusong.top:8080/img/swiper/2.png"
          alt=""
          width="100%"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="http://liufusong.top:8080/img/swiper/3.png"
          alt=""
          width="100%"
        />
      </van-swipe-item> -->
    </van-swipe>

    <van-search
      v-model="value"
      class="my-serch"
      show-action
      label="地址"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <van-icon name="location-o" size="7vw" />
      </template>
    </van-search>
    <!-- 宫格组件 -->
    <van-grid
      :column-num="4"
      route
      :border="false"
      icon-size="10vw"
      class="grid"
    >
      <van-grid-item icon="wap-home-o" text="整租" to="/tabulation" />
      <van-grid-item icon="friends-o" text="合租" to="/tabulation" />
      <van-grid-item icon="location-o" text="地图找房" to="/maphouse"/>
      <van-grid-item icon="wap-home-o" text="去出租" to="/gohire"/>
    </van-grid>
    <div class="box">
      <div class="bot-top">
        <h4>租房小组</h4>
        <a href="#">更多</a>
      </div>
      <div class="box-goods">
        <van-card
          class="card"
          v-for="item in groups"
          :key="item.id"
          :centered="true"
          :desc="item.desc"
          :title="item.title"
          :thumb="'http://liufusong.top:8080'+item.imgSrc"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { carousel, groups } from '@/api/index'
export default {
  name: 'Index',
  props: {},
  data () {
    return {
      list: [],
      groups: [],
      value: '',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '上海', value: 0 },
        { text: '杭州', value: 1 },
        { text: '北京', value: 2 }
      ]
    }
  },
  methods: {
    onSearch (val) {
      console.log(val)
    }
  },
  async created () {
    const data = await carousel()
    // console.log(data)
    this.list = data.body
    const res = await groups()
    console.log(res)
    this.groups = res.body
  }
}
</script>

<style scoped lang="less">
.box{
  height: 65vw;
}
.box-goods {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  align-content: space-between;
  .card {
    width: 47%;
    height: 20vw;
    margin-left: 2%;
    border-radius: 2vw;
  }
}
.goods-card {
  margin: 0;
  background-color: #fff;
}
img {
  width: 100%;
  height: 65%;
  display: block;
}
.my-serch {
  position: absolute;
  margin-top: -50%;
  margin-left: 10%;
}
.my-swipe .van-swipe-item {
  // position: absolute;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.box {
  background-color: #f6f5f6;
}
.bot-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  h4 {
    margin-left: 5vw;
  }
  a {
    margin-right: 3vw;
    color: #8c7d91;
  }
}
</style>
